<template>
    <div>
		
        <el-card shadow="hover" body-style="padding:0;" >
			<template #header>
          <div class="card-header">
            <!-- <span>FM联赛-TPP第二周艾伦格跳点选择</span> -->
			<el-select v-model="matchCode" placeholder="请选择比赛场次" style="width:400px"  size="large" @change="changeMatch">
				<el-option-group
				label="FM联赛·FPP"
				>
				<el-option
					v-for="( item, index) in FPPSelect"
					:key="index"
					:label="String(item.status===1?'[进行中] ':item.status===2?'[未开始] ':item.status===3?'[已结束] ':'')+item.matchName"
					:value="item.matchCode"
				/>
				</el-option-group>
				<el-option-group
				label="FM联赛·TPP"
				>
				<el-option
					v-for="( item, index) in TPPSelect"
					:key="index"
					:label="String(item.status===1?'[进行中] ':item.status===2?'[未开始] ':item.status===3?'[已结束] ':'')+item.matchName"
					:value="item.matchCode"
				/>
				</el-option-group>
			</el-select>
            <el-button class="button" type="primary" style="margin:0 0 0 10px" v-if="MapChange==1" @click="ChangeMap" >切换米拉码</el-button>
            <el-button class="button" type="primary" style="margin:0 0 0 10px" v-else-if="MapChange==2" @click="ChangeMap" >切换泰戈</el-button>
            <el-button class="button" type="primary" style="margin:0 0 0 10px" v-else-if="MapChange==3" @click="ChangeMap" >切换维寒迪</el-button>
            <el-button class="button" type="primary" style="margin:0 0 0 10px" v-else-if="MapChange==4" @click="ChangeMap" >切换艾伦格</el-button>
            <el-button class="button" type="primary" style="margin:0 0 0 10px"  @click="Refaush">刷新</el-button>
			<el-upload
				ref="upload"
				class="upload-demo"
				accept=".xls,.xlsx"
				action="/fm/api/jump/inputfile"
				:limit="1"
				name="file"
				:on-exceed="handleExceed"
				:on-success="uploadSuccess"
				:auto-upload="true"
				style="float:right;margin:0 100px 0 0 "
			>
				<template #trigger>
				<el-button type="primary">导入跳点信息</el-button>
				<el-button class="button" type="success" style="margin:0 0 0 10px"  @click="Jump2web">制作跳点图</el-button>
				<el-button class="button" type="success" style="margin:0 0 0 10px"  @click="Jump2ImageEdit">图片缩放</el-button>
				</template>
				
			</el-upload>
			
            <el-button class="button" color="#626aef" style="margin:0 0 0 10px" v-if="hasMatch"  @click="OutFile('4096')">导出跳点文件(4K)</el-button>
            <!-- <el-button class="button" color="#626aef" style="margin:0 0 0 10px" v-if="hasMatch"  @click="OutFile('1500')">导出跳点文件(1500)</el-button> -->
			<el-link href="/fm_jump.xlsx" target="_blank" style="margin:0 0 0 10px">     下载模板</el-link>
			<div class="plugins-tips" style="margin:15px 0 0 0">
				一、根据跳点示意图选择对应序号跳点。<br />
				二、每个跳点最多可容纳两个队选择，先选先得。<br />
				三、初次跳点选择后，可与同选跳点的队伍自行协商或进行赛前跳点争夺，失败者届时可选择未被人选择的跳点。越早协商越有利。<br />
				四、蓝色为主跳，黄色为副跳。
			</div>
          </div>
        </template>
		<div style="position:relative;">
			<div v-if="hasMatch" v-show="MapChange==1" style="height:1080px;width:1080px;background-image:url(https://cache.jg110.cn/fmpage/alg.jpg);background-size:100% 100%;position:relative;" >
			<!-- <div style="height:1080px;width:1080px;background-image:url(https://i.328888.xyz/2023/03/19/MBWqb.jpeg);background-size:100% 100%;position:relative;" > -->
				<el-tooltip   v-for="(item, index) in algmaplist" :key="index"  :content="item.teamJump"   :placement="item.y>100?'top':'bottom'" effect="light"  raw-content>
				<el-button class="button"  :style="`position:absolute;left:${item.x-40}px;top:${item.y-16}px;margin:0 2px`"  :type="item.type" @click="choseJump(item.jumpCode)">{{item.title}}</el-button>
				</el-tooltip>
				<div  style="margin:0 0 0 15px;position:absolute;left: 1080px;width:400px;">
					<ul  class="infinite-list" style="overflow: auto">
						<!-- <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li> -->
						<li  class="infinite-list-item">5分钟前 KFC 选择了主跳2</li>
						<li  class="infinite-list-item">1分钟前 KFC 取消了主跳2</li>
						<li  class="infinite-list-item">刚刚 KFC 选择了主跳3</li>
						<li  class="infinite-list-item" type="warning">刚刚 KFC 选择了复跳2</li>
					</ul>
				</div>
			</div>
			<div v-if="hasMatch" v-show="MapChange==2" style="height:1080px;width:1080px;background-image:url(https://cache.jg110.cn/fmpage/mlm.jpg);background-size:100% 100%;position:relative;" >
			<!-- <div style="height:1080px;width:1080px;background-image:url(https://i.328888.xyz/2023/03/19/MBWqb.jpeg);background-size:100% 100%;position:relative;" > -->
				<el-tooltip   v-for="(item, index) in mlmmaplist" :key="index"  :content="item.teamJump"   :placement="item.y>100?'top':'bottom'" effect="light"  raw-content>
				<el-button class="button"  :style="`position:absolute;left:${item.x-40}px;top:${item.y-16}px;margin:0 2px `"  :type="item.type" >{{item.title}}</el-button>
				</el-tooltip>
				<div  style="margin:0 0 0 15px;position:absolute;left: 1080px;width:400px;">
					<ul  class="infinite-list" style="overflow: auto">
						<!-- <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li> -->
						<li  class="infinite-list-item">5分钟前 KFC 选择了主跳2</li>
						<li  class="infinite-list-item">1分钟前 KFC 取消了主跳2</li>
						<li  class="infinite-list-item">刚刚 KFC 选择了主跳3</li>
						<li  class="infinite-list-item" type="warning">刚刚 KFC 选择了复跳2</li>
					</ul>
				</div>
			</div>
			<div v-if="hasMatch" v-show="MapChange==3" style="height:1080px;width:1080px;background-image:url(https://cache.jg110.cn/fmpage/tg.jpg);background-size:100% 100%;position:relative;" >
			<!-- <div style="height:1080px;width:1080px;background-image:url(https://i.328888.xyz/2023/03/19/MBWqb.jpeg);background-size:100% 100%;position:relative;" > -->
				<el-tooltip   v-for="(item, index) in mlmmaplist" :key="index"  :content="item.teamJump"   :placement="item.y>100?'top':'bottom'" effect="light"  raw-content>
				<el-button class="button"  :style="`position:absolute;left:${item.x-40}px;top:${item.y-16}px;margin:0 2px `"  :type="item.type" >{{item.title}}</el-button>
				</el-tooltip>
				<div  style="margin:0 0 0 15px;position:absolute;left: 1080px;width:400px;">
					<ul  class="infinite-list" style="overflow: auto">
						<!-- <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li> -->
						<li  class="infinite-list-item">5分钟前 KFC 选择了主跳2</li>
						<li  class="infinite-list-item">1分钟前 KFC 取消了主跳2</li>
						<li  class="infinite-list-item">刚刚 KFC 选择了主跳3</li>
						<li  class="infinite-list-item" type="warning">刚刚 KFC 选择了复跳2</li>
					</ul>
				</div>
			</div>
			<div v-if="hasMatch" v-show="MapChange==4" style="height:1080px;width:1080px;background-image:url(http://cache.jg110.cn/fm/whd.jpg);background-size:100% 100%;position:relative;" >
			<!-- <div style="height:1080px;width:1080px;background-image:url(https://i.328888.xyz/2023/03/19/MBWqb.jpeg);background-size:100% 100%;position:relative;" > -->
				<el-tooltip   v-for="(item, index) in mlmmaplist" :key="index"  :content="item.teamJump"   :placement="item.y>100?'top':'bottom'" effect="light"  raw-content>
				<el-button class="button"  :style="`position:absolute;left:${item.x-40}px;top:${item.y-16}px;margin:0 2px `"  :type="item.type" >{{item.title}}</el-button>
				</el-tooltip>
				<div  style="margin:0 0 0 15px;position:absolute;left: 1080px;width:400px;">
					<ul  class="infinite-list" style="overflow: auto">
						<!-- <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li> -->
						<li  class="infinite-list-item">5分钟前 KFC 选择了主跳2</li>
						<li  class="infinite-list-item">1分钟前 KFC 取消了主跳2</li>
						<li  class="infinite-list-item">刚刚 KFC 选择了主跳3</li>
						<li  class="infinite-list-item" type="warning">刚刚 KFC 选择了复跳2</li>
					</ul>
				</div>
			</div>
			
		</div>
        </el-card>

	</div>
</template>

<script setup lang="ts" name="jump">
import { el } from "element-plus/es/locale";
import { ElMessage, ElMessageBox,ElLoading } from "element-plus";
import { ref, reactive, unref } from "vue";
import {
	GetJumpButtomList,
	GetMatchList,
	DownJump
  } from "../api/jump";
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile} from 'element-plus'

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  ElMessage.success("文件选择成功");
  upload.value!.handleStart(file)

}
const uploadSuccess: UploadProps['onSuccess'] = (response: any) => {
	console.log(response)
	if (response.code==200){
		ElMessage.success("跳点信息导入成功");
		Init(Number(mapCode.value))
	}else{
		ElMessage.error(response.data);
	}

}

const upload = ref<UploadInstance>()
  interface xyList {
	id:number,
	jumpCode:string,
	map:number,
	x:number,
	y:number,
	title:string,
	type:string,
	teamJump:string,
	disable:boolean
  }
  interface jumpTeam {
	teamName:string,
	log:string,
  }
  interface matchList {
	id:number,
	matchCode:string,
	matchName:string,
	model:string,
	status:number,
	startTime:string,
	endTime:string,
  }
  const myselect = reactive({
  teamId:0,
  teamName: '',
  mainJump: '',
  subJump: '',
}); 
  const algmaplist =ref<xyList[]>([]);
  const mlmmaplist =ref<xyList[]>([]);
  const FPPSelect =ref<matchList[]>([]);
  const TPPSelect =ref<matchList[]>([]);
  const matchCode = ref('')
  const matchName = ref('')
  const mapCode = ref('1')
  const MapChange = ref(0)
  const hasMatch = ref(false)
  
  const InitMatch= async ()=>{
	
	const { data }:any = await GetMatchList();
		if (data.code!=200){
			ElMessage.error(data.msg);
		}else{
			FPPSelect.value = data.data.fpp;
			TPPSelect.value = data.data.tpp;
			console.log(TPPSelect)
		}
  }
  const Init = async (map:number)=>{
		const { data }:any = await GetJumpButtomList(map.toString(),matchCode.value);
		if (data.code!=200){
			ElMessage.error(data.msg);
		}else{
			if (map==1){
				algmaplist.value = data.data;
			}else{
				mlmmaplist.value = data.data;
			}
			
		}
  }
  InitMatch()
const changeMatch =(e:any)=>{
	console.log(e)
	hasMatch.value=true
	MapChange.value=1
	
	mapCode.value="1"
	Init(Number(mapCode.value))
}
const Refaush = ()=>{
	// InitMatch()
	Init(Number(mapCode.value))
}
const ChangeMap = ()=>{

	if (MapChange.value<=3){
		MapChange.value+=1
		mapCode.value=String(MapChange.value)
		Init(Number(mapCode.value))
	}else{
		MapChange.value=1
		mapCode.value="1"

		Init(Number(mapCode.value))
	}
}
const choseJump = (jumpCode:string)=>{
	
}
const OutFile =(size:string)=>{
// 	const loading = ElLoading.service({
//     lock: true,
//     text: '导出文件中',
//     background: 'rgba(0, 0, 0, 0.7)',
//   })
	//  DownJump(matchCode.value,mapCode.value).then(resp => download(resp))
	window.open(`/fm/api/jump/make/down?matchCode=${matchCode.value}&map=${mapCode.value}&size=${size}`,'_blank')
	// downFile(`/fm/api/jump/make/down?matchCode=${matchCode.value}&map=${mapCode.value}`)
}
	let download = (resp:any) => {
    let blob = new Blob([resp.data], {type: 'application/file'})
    //创建下载的链接
    let href = window.URL.createObjectURL(blob)
    downloadBlob(href)
}
const Jump2web = ()=>{
	window.open(`http://jump.jg110.cn/#/`,'_blank')
}
const Jump2ImageEdit = ()=>{
	window.open(`http://birme.jg110.cn/?target_width=1400&target_height=1400&wm_text=FM%E8%81%94%E8%B5%9B&quality_preset=high`,'_blank')
}
let downloadBlob = (blobUrl:string) => {
    let downloadElement = document.createElement('a')
    downloadElement.href = blobUrl
    //下载后文件名
	 
    downloadElement.download = `${matchName}-${MapChange.value===1?'艾伦格':MapChange.value===2?'米拉吗':MapChange.value===3?'泰戈':'维寒迪'}.json`;
    document.body.appendChild(downloadElement)
    //点击下载
    downloadElement.click()
    //下载完成移除元素
    document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(blobUrl)
		const loading = ElLoading.service({
    lock: true,
    text: '导出文件中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  loading.close()

}
const  downFile=(fileStr:string) =>{
      const anchorEl = document.createElement('a');
      anchorEl.href = fileStr;
      anchorEl.download = `${matchName}.json`;
      document.body.appendChild(anchorEl); // required for firefox
      anchorEl.click();
      anchorEl.remove();
	  ElMessage.success("导出任务进行中，请耐心等待");
    }
</script>

<style>
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
.tooltips{
	height: 40px;
	width: 120px;
}
</style>
